<template>
    <div class="app-container">
        <div ref="searchForm">
            <el-form :inline="true" :model="formData" class="search-form-inline" size="small">
                <el-form-item label="名称">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="是否结束">
                    <el-select v-model="formData.isEndingStatus" collapse-tags>
                        <el-option
                            v-for="item in isEndingStatusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList(1)">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div slot="header" class="clearfix">
            <el-button class="toolbar-btn" @click="sortTable()">排序</el-button>
            <el-button class="toolbar-btn" @click.native="addOrModify()">新增</el-button>
        </div>
        <elTable ref="dataInfo" :enterSearch="true" :formData="formData" @tableData="getList">
            <el-table-column label="名称" align="center">
                <template slot-scope="{row}">
                    <el-button type="text" @click="viewUser(row)">{{row.name}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="navRecommendation" label="快速导航推荐" align="center"></el-table-column>
            <el-table-column prop="picture" type="img" label="展示图" align="center">
                <template>
                    <img
                        clickable
                        title="广告图片"
                        src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2798791900,2905206626&fm=26&gp=0.jpg"
                        min-width="70"
                        height="70"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="230">
                <template slot-scope="{row,$index}">
                    <el-button type="primary" size="mini" @click.native="addOrModify(row)">修改</el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        @click.native="goodsMessage(row)"
                        v-if="row.floorType==1||row.floorType==4"
                    >商品管理</el-button>
                    <!-- 优惠券 -->
                    <el-button
                        type="primary"
                        size="mini"
                        @click.native="activityOrCouponMessage(row)"
                        v-if="row.floorType==2"
                    >优惠券管理</el-button>
                    <!-- 联联购 -->
                    <el-button
                        type="primary"
                        size="mini"
                        @click.native="activityOrCouponMessage(row)"
                        v-if="row.floorType==3"
                    >活动管理</el-button>
                </template>
            </el-table-column>
        </elTable>
        <sortTable ref="sortTable"></sortTable>
        <dialogFloorMessage ref="dialogFloorMessage"></dialogFloorMessage>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable";
import apisFloorMessage from "@/api/shopDecoration/floorMessage"; //楼层管理列表接口
import sortTable from "@/dialog/table/tableSort"; //表格排序框
import dialogFloorMessage from "./dialogFloorMessage";
export default {
    name: "floorMessage",
    components: { elTable, apisFloorMessage, sortTable, dialogFloorMessage },
    data() {
        return {
            formData: {
                name: "",
                isEndingStatus: "",
                currentPage: 1,
                pageSize: 10,
            },
            isEndingStatusList: [
                {
                    value: "0",
                    label: "未开始",
                },
                {
                    value: "1",
                    label: "进行中",
                },
                {
                    value: "2",
                    label: "已结束",
                },
            ],
            dataInfo: [],
            templateTypeList: [], //模板类型
        };
    },
    mounted() {
        // this.dataInfo = this.$refs.dataInfo;
    },
    methods: {
        getList(pageNo) {
            let _this = this;
            _this.formData.currentPage = pageNo || _this.formData.currentPage;
            let dataInfo = [
                {
                    id: 1,
                    name: "超级团购",
                    floorType: "1",
                },
                {
                    id: 2,
                    name: "索隆-优惠券",
                    floorType: "2",
                },
                {
                    id: 3,
                    name: "山治-联联购",
                    floorType: "3",
                },
                {
                    id: 4,
                    name: "秒杀",
                    floorType: "4",
                },
            ];
            let total = 10;
            this.$nextTick(() => {
                this.$refs.dataInfo.loadData(dataInfo, total);
            });
            // apisFloorMessage.floorMessageList(_this.formData).then((res) => {
            //     _this.dataInfo.loadData(res.data.list, res.data.total);
            //    _this.templateTypeList = res.templateTypeList
            // });
        },
        // 新增/修改 templateTypeList
        addOrModify(row) {
            this.$refs.dialogFloorMessage.open(row);
        },
        // 排序
        sortTable() {
            this.dataInfo.sortTable({
                dataUrl: "/floorMessage/list",
                sortUrl: "/floorMessage/doSort",
                callback: () => {
                    this.getList();
                },
            });
        },
        // 商品管理：
        goodsMessage(row) {
            //  秒杀先去时间段
            if (row.floorType == 4) {
                this.$router.push({
                    path: [
                        "/shopDecoration/spikePeriod",
                        row.id,
                        "秒杀时间段",
                    ].join("/"),
                    query: { id: row.id },
                });
            } else {
                this.$router.push({
                    path: [
                        "/shopDecoration/goodsMessage",
                        row.id,
                        "商品管理:" + row.name,
                    ].join("/"),
                    query: { templateId: row.id, floorType: row.floorType },
                });
            }
        },
        // 活动管理,优惠券管理
        activityOrCouponMessage(row) {
            this.$router.push({
                path: [
                    "/shopDecoration/activityMessage",
                    row.id,
                    "活动管理:" + row.name,
                ].join("/"),
                query: { templateId: row.id, floorType: row.floorType },
            });
        },
    },
};
</script>